<template>
  <el-menu-item
    v-if="!item.children"
    :index="item.name"
    style="display: flex"
    @click="clickTroops(item)"
  >
    <span
      class="span"
      :class="{
        active: route.meta.name == item.meta.name,
      }"
    >
      <!-- 最底层 -->
      <span>
        <i class="iconfont" :class="item.meta.icon"></i>
        <span> {{ item.meta.name }}</span>
      </span>
    </span>
  </el-menu-item>

  <el-sub-menu v-else-if="item.children" :index="item.name">
    <template #title>
      <i class="iconfont" :class="item.meta.icon"></i>
      <span>
        {{ item.meta.name }}
      </span>
    </template>
    <div>
      <s-menu
        v-for="(ele, index) in item.children"
        :key="index"
        :item="ele"
        @clickTroops="clickTroops"
      />
    </div>
  </el-sub-menu>
</template>
<script setup>
import { RouterView } from "vue-router";
import { ref, onMounted, onUnmounted, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
import { useStore } from "vuex";
let emigFun = defineEmits(["clickTroops"]);
const store = useStore();
const isCollapse = computed(() => {
  return store.state.head.isCollapse;
});

const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
});
console.log();
// defineProps(["item", "index"]); //父组件向子组件传递的数据
const clickTroops = (item) => {
  console.log(item, 8888);
  emigFun("clickTroops", item);
};
defineOptions({
  name: "SMenu", //组件命名
});
const goPath = (name) => {
  console.log(name);
  router.push({ name: name });
};

onMounted(() => {});
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
</script>
<style scoped lang="scss">
i {
  margin-left: -18px;
  margin-right: 5px;
}
</style>
